<script type="text/javascript">
Ext.onReady(function(){
    Ext.QuickTips.init();

    RM_MyReservations_List_Grid = new Ext.grid.GridPanel({
        store: new Ext.data.GroupingStore({
            autoLoad: true,
            reader: new Ext.data.JsonReader({
                idProperty: 'detail_id',
                totalProperty: 'total',
                root: 'data',
                fields:[
                    {name: 'reservation_id', type: 'string'},
                    {name: 'detail_id', type: 'string'},
                    {name: 'price', type: 'string'},
                    {name: 'total_price', type: 'string'},
                    {
                        name: 'start_date', 
                        type: 'date',
                        dateFormat: RM.Common.MySQLDateFormat
                    },
                    {
                        name: 'end_date',
                        type: 'date',
                        dateFormat: RM.Common.MySQLDateFormat
                    },
                    {name: 'unit_id', type: 'string'},
                    {name: 'unit_name', type: 'string'},
                    {name: 'cancel', type: 'string'},
                    {name: 'notes', type: 'string'}
                ]}
            ),
            url: RM.Common.AssembleURL({
                controller: 'MyReservations_List',
                action: 'reservationsjson'
            }),
            groupField: 'reservation_id'
        }),

        columns: [
            new Ext.grid.CheckboxSelectionModel({
                header: "",
                singleSelect: true,
                hidden: true
            }),
            {
                header: RM.Translate.User.MyReservations.List.BookingRef,
                sortable: true,
                hidden: true,
                dataIndex: 'reservation_id'
            },
            {
                header: RM.Translate.User.MyReservations.List.Price,
                width: 80,
                sortable: true,
                dataIndex: 'price'
            },
            {
                header: RM.Translate.User.MyReservations.List.StartDate,
                width: 120,
                sortable: true,
                renderer: Ext.util.Format.dateRenderer(RM.Common.GUIDateFormat),
                dataIndex: 'start_date'
            },
            {
                header: RM.Translate.User.MyReservations.List.EndDate,
                width: 120,
                sortable: true,
                renderer: Ext.util.Format.dateRenderer(RM.Common.GUIDateFormat),
                dataIndex: 'end_date'
            },
            {
                header: RM.Translate.User.MyReservations.List.UnitName,
                width: 180,
                sortable: true,
                dataIndex: 'unit_name'
            },
            {
                header: RM.Translate.User.MyReservations.List.Cancel,
                width: 120,
                sortable: true,
                dataIndex: 'cancel', 
                renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                    metaData.css = 'RM_reservation_list_cancel_' + value;
                }
            }
        ],

        view: new Ext.grid.GroupingView({
            forceFit: true
        }),
        anchor: '100%',
        id: 'my_reservations_list_gridpanel',
        frame: false,
        height: 300,
        title: RM.Translate.User.MyReservations.List.ReservationList,
        iconCls: 'icon-grid',
        renderTo: 'rm_myreservations_list_grid'
    });

    Ext.getCmp('my_reservations_list_gridpanel').store.on('load', function(){
        var grid = Ext.getCmp('my_reservations_list_gridpanel');
        grid.getSelectionModel().selectRow(0);
        grid.fireEvent('rowclick', grid, 0);
    }, this, {
        single: true
    });

});

/**
 * Returns full grid row information.
 *
 * @see RM_MyReservations_List_Grid.store.reader.fields
 * @return array|null - null if no grid row selected
 */
RM_MyReservations_List_GetSelected = function(){
    var selections = RM_MyReservations_List_Grid.getSelectionModel().getSelections();
    if (selections.length === 0){
        Ext.Msg.alert(RM.Translate.Common.Status, RM.Translate.Common.NeedToSelectRows);
        return null;
    }
    return selections[0].data;
};

/**
 * Reload main grib panel with current reservation information
 */
RM_MyReservations_List_Reload = function(){
    RM_MyReservations_List_Grid.getStore().reload();
}
</script>
<div id="<?php echo $this->panel->getDivID() ?>">
    <div id="rm_myreservations_list_grid"></div>    
</div>